<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
</head>
<body>
<div class="app">
	<pre>
		1. 方法一
			每次使用innerHTML添加元素都会有性能的消耗，频繁使用innerHTML会极大
			消耗系统性能

		2. 方法二
			使用字符串将每次遍历的字符全部保存在一个变量中，行对于方法一有所提
			升，但是由于字符不可变，每次 += 新的内容是也会由系统的开销

		3. 方法三
			将字符串保存在数组中，由于数组在定义的时候便已经进行了内存的开辟，
			因此，相比方法二来说，性能会大大提升
			
	</pre>
</div>
<script type="text/javascript">
	
	var app = document.getElementsByClassName('app')[0];
	var data = [
		{title: '李斯', age: 12},
		{title: '利好', age: 14},
		{title: '张思', age: 16},
		{title: '小明', age: 17},
	]

	// 方法一
	// app.innerHTML += '<ul>';

	// for (var i = 0; i < data.length; i++) {
	// 	app.innerHTML += '<li>'+data[i].title+'---'+data[i].age+'</li>';
	// }
	// app.innerHTML += '</ul>';


	// 方法二
	// var html = '<ul>';
	// for (var i = 0; i < data.length; i++) {
	// 	html += '<li>'+data[i].title+'---'+data[i].age+'</li>';
	// }
	// html += '</ul>'
	// app.innerHTML = html;


	// 方法三
	var html = ['<ul>'];
	for (var i = 0; i < data.length; i++) {
		html.push('<li>'+data[i].title+'---'+data[i].age+'</li>');
	}
	html.push('</ul>');
	html = html.join('');
	console.log(html);
	app.innerHTML = html;

</script>
</body>
</html>